<template>
  <n-space vertical>
    <n-collapse
      v-model:expanded-names="surfaceSetting.fieldExpandedNames"
      style="width: 100%"
    >
      <n-collapse-item
        title="领域"
        name="领域"
      >
        <template #header-extra> 展示领域：{{ showFieldName }} </template>
        <n-space justify="space-between">
          <n-radio-group
            v-model:value="value"
            name="radiobuttongroup1"
          >
            <n-radio
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </n-space>
        <template v-if="value === '普通模式'">
          <n-layout has-sider>
            <n-layout-sider
              bordered
              content-style="padding: 10px;max-height: 420px"
            >
              <FieldTree></FieldTree>
            </n-layout-sider>
            <n-layout-content content-style="padding: 30px;">
              <StagePanel :key="surfaceSetting.StageListKey"></StagePanel>
            </n-layout-content>
          </n-layout>
        </template>
        <template v-if="value === '思维导图'">
          <mindMap style="height: 450px"></mindMap>
        </template>
      </n-collapse-item>
      <!--      <n-collapse-item title="阶段" name="阶段">-->
      <!--        <StagePanel :key="surfaceSetting.StageListKey"></StagePanel>-->
      <!--        <template #header-extra> 所属领域 </template>-->
      <!--      </n-collapse-item>-->
      <n-collapse-item
        title="任务"
        name="任务"
      >
        <n-space>
          <n-switch v-model:value="show.showCalendar"><template #unchecked>展示日历</template></n-switch>
          <n-switch v-model:value="show.hideTask1"><template #unchecked>隐藏步骤任务</template></n-switch>
          <n-switch v-model:value="show.hideTask2"><template #unchecked>隐藏习惯任务</template></n-switch>
          <n-switch v-model:value="choose.toEdit"><template #unchecked>选择领域</template></n-switch>
          <n-select
            :disabled="!choose.toEdit"
            v-model:value="choose.chooseField"
            @update:value="choose.chooseStage = null"
            :options="fieldTree.getFieldSelectOptions()"
            filterable
            style="width: 200px"
          />
          <n-select
            :disabled="!choose.toEdit"
            v-model:value="choose.chooseStage"
            filterable
            :options="stageOptions"
            style="width: 200px"
          />
        </n-space>
        <template v-if="show.showCalendar">
          <task-panel-calendar :key="surfaceSetting.TaskListKey + 14"></task-panel-calendar>
        </template>
        <n-divider />
        <template v-if="!show.hideTask1">
          <TaskPanel
            :key="surfaceSetting.TaskListKey + 7"
            :type="1"
          ></TaskPanel>
        </template>
        <template v-if="!show.hideTask2">
          <TaskPanel
            :key="surfaceSetting.TaskListKey"
            :type="2"
          ></TaskPanel>
        </template>
      </n-collapse-item>
      <n-collapse-item
        title="内容"
        name="内容"
      >
        <template #header-extra> 展示领域：{{ showFieldName }} </template>
        <markdown v-model="text"></markdown>
      </n-collapse-item>
    </n-collapse>
    <div style="height: 10px"></div>
  </n-space>
</template>
<script setup lang="ts">
import mindMap from "../common/mindMap.vue";
import StagePanel from "./stages/StagePanel.vue";
import TaskPanel from "./tasks/TaskPanel.vue";
import markdown from "@/components/common/markDown.vue";
import FieldTree from "@/components/field/fieldTree/FieldTree.vue";
import TaskPanelCalendar from "@/components/field/tasks/TaskPanelCalendar.vue";
import { StageList } from "@model/stage";
import UseCacheTaskLog from "@pinias/UseCacheTaskLog";
import UseFieldTree from "@pinias/UseFieldTree";
import UseStage from "@pinias/UseStage";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { NSpace, NCollapse, NCollapseItem, useMessage } from "naive-ui";
import { onMounted, reactive, ref, watch } from "vue";

// 全局数据
const { getSurfaceSetting } = UseSurfaceSetting();
const surfaceSetting = getSurfaceSetting();
const { getFieldTree } = UseFieldTree(pinia);
const fieldTree = getFieldTree();
const { getCacheTaskLogMap } = UseCacheTaskLog(pinia);
const cacheTaskLogMap = getCacheTaskLogMap();
const { getStageList } = UseStage(pinia);
const stageList: StageList = getStageList();
const message = useMessage();

// markdown编辑器
const fieldData = fieldTree.getFieldDataById(surfaceSetting.getShowField());
const text = reactive({ text: fieldData !== undefined ? fieldData.markDownFile : "", show: false });
watch(text, () => {
  const f = fieldTree.getFieldDataById(surfaceSetting.getShowField());
  if (f !== undefined) f.markDownFile = text.text;
});
watch(surfaceSetting.showField, () => {
  const f = fieldTree.getFieldDataById(surfaceSetting.getShowField());
  if (f !== undefined) {
    text.text = f.markDownFile;
    // console.log("++++++++++++++++++++",text.text)
    showFieldName.value = f.topic;
  }
});
const showFieldName = ref(fieldTree.getFieldDataById(surfaceSetting.getShowField())?.topic);
// 思维导图数据
const value = ref("普通模式");
const songs = [
  {
    value: "普通模式",
    label: "普通模式",
  },
  {
    value: "思维导图",
    label: "思维导图",
  },
].map(s => {
  s.value = s.value.toLowerCase();
  return s;
});
// 任务栏选项
const choose = reactive<{
  chooseField: number | undefined;
  chooseStage: number | null;
  toEdit: boolean;
}>({
  chooseField: undefined,
  chooseStage: surfaceSetting.getShowStage(),
  toEdit: false,
});
const stageOptions = ref<Array<{ label: string; value: number }>>([]);
onMounted(async () => {
  if (choose.chooseStage !== null) {
    const stageData = stageList.getStageDataById(choose.chooseStage);
    choose.chooseField = stageData?.fatherId;
    if (choose.chooseField !== undefined)
      stageOptions.value = await cacheTaskLogMap.getStageSelectOptions2(
        fieldTree.getFieldDataById(choose.chooseField),
        true,
        stageList,
      );
  }
});
watch(choose, async () => {
  if (choose.chooseField !== undefined)
    stageOptions.value = await cacheTaskLogMap.getStageSelectOptions2(
      fieldTree.getFieldDataById(choose.chooseField),
      true,
      stageList,
    );
  if (!choose.toEdit) {
    if (choose.chooseStage !== null) {
      surfaceSetting.showStage.pop();
      surfaceSetting.showStage.push(choose.chooseStage);
    } else {
      message.error("未选择领域");
      choose.toEdit = true;
    }
  }
});
watch(surfaceSetting.showStage, () => {
  choose.chooseStage = surfaceSetting.getShowStage();
  const stageData = stageList.getStageDataById(choose.chooseStage);
  choose.chooseField = stageData?.fatherId;
});
// 日历
const show = reactive({ showCalendar: false, hideTask1: false, hideTask2: false });
</script>
